import {ModalForm, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea} from '@ant-design/pro-components';
import React from 'react';

type Props = {
  onOpenChange: (open: boolean) => void; // ...
  Open: boolean;
};

const EnvAdd: React.FC<Props> = (props) => {
  return (
    <ModalForm
      onOpenChange={props.onOpenChange}
      open={props.Open}
      title="添加环境"
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          props.onOpenChange(false);
        },
      }}
      onFinish={async (record) => {
        console.log(record);
        return true;
      }}
    >
      <ProFormText
        name="envName"
        label={'名称'}
        tooltip={
          '应用下环境唯一标识，创建后不可修改。支持1～63个小写英文字母、数字或“-”，以字母开头，以字母或数字结尾'
        }
        placeholder={'请输入1-63个小写英文字母、数字或者“-”，以字母开头，以字母或数字结尾'}
        rules={[{ required: true, message: '' }]}
      />
      <ProFormText
        name="envRemark"
        label={'显示名称'}
        tooltip={'环境显示名，创建后可在环境设置里按需修改。支持1-32个中英文字符、数字或符号'}
        placeholder={'请输入1-32个中英文字符、数字或符号'}
        rules={[{ required: true, message: '' }]}
      />
      <ProFormSelect
        name="envTag"
        tooltip={'可使用标签来归类环境，如环境等级，关联后可在环境设置里按需修改'}
        label={'环境标签'}
        rules={[{ required: true, message: '' }]}
        options={[
          { label: '开发环境', value: 'dev' },
          { label: '测试环境', value: 'test' },
          { label: '预发环境', value: 'pre' },
          { label: '生产环境', value: 'prod' },
        ]}
      />

      <ProFormTextArea
        name="envDescription"
        label={'描述'}
        placeholder={'请输入0-128个中英文字符、数字或符号'}
      />
    </ModalForm>
  );
};

export default EnvAdd;
